Goal: Sort the blog posts on the Blog Archive Page and further refactor on the Home Page.

The BlogComponent component uses injectContentFiles to retrieve all the markdown files from the content folders. The Blog Archive Page displays the blog posts in any order; therefore, I want to sort the posts by the datePublished property in descending order. injectContentFiles returns an array; consequently, I can apply the sort method to sort the objects.

Sort the blog post array

目標：對部落格存檔頁面上的部落格文章進行排序，並在主頁上進一步重構。

BlogComponent 元件使用 injectContentFiles 從內容資料夾擷取所有 markdown 檔案。部落格存檔頁面以任意順序顯示部落格文章；因此，我想按 datePublished 屬性進行排序。 insertContentFiles 傳回一個陣列；因此，我可以應用 sort 方法來對物件進行排序。

將部落格文章陣列排序

import { injectContentFiles } from '@analogjs/content';
import PostAttributes from '../../post-attributes';

export default class BlogComponent {
  readonly posts = injectContentFiles<PostAttributes>().sort(({attributes: a }, { attributes: b }) =>
    new Date(b.datePublished).getTime() - new Date(a.datePublished).getTime()
  );
}

datePublished 屬性是一個字串；因此，我使用該值建立 Date 物件，並且 getTime 方法會傳回總毫秒數。 然後，我比較兩個日期的總毫秒數，並將較晚的日期排在較舊的日期之前。

此外，HomeComponent 元件出現了 3 個 ，它們具有相同的 CSS 樣式和 HTML 結構。 我可以重構 HTML 範本以使用 for 迴圈來重複渲染 CardComponent 元件。

export default class HomeComponent {
    cardContents = [
        {
            title: 'Current Technical Stack',
            items: [
                "Angular",
                "Vue (Composition API)",
                "NestJS",
                "JavaScript",
                "HTMX",
                "PostgreSQL"
            ]
        },
        {
            title: "Areas of Interest",
            items: [
                "Angular Architecture",
                "REST API",
                "GraphQL",
                "Generative AI",
            ]
        },
        {
            title: "Hobbies",
            items: [
                "Learn Foreign Languages",
                "Learn Tech",
                "Exercise",
                "Blogging",
                "Watch Wrestling and make podcasts",
                "Travelling"
            ]
        }
    ]
}

首先，我建立一個 cardContents 陣列來儲存每張卡片的標題和清單項目。

<section class="flex justify-evenly">
        @for (content of cardContents; track $index) {
            <blog-card>
                <p header class="text-xl underline">{{ content.title }}<p>
                <ul class="text-left list-disc p-5">
                    @for (item of content.items; track item) {
                        <li>{{ item }}</li>
                    }
                </ul>
            </blog-card>
        }
 </section>

for 循環迭代 cardContents 陣列並呈現 CardComponent 元件。 title 屬性透過 header 屬性投影到 ng-content 。 items 陣列被投影到預設的 ng-content。

導航至 http://localhost:5173/home

主頁應該具有相同的外觀。

Github Repo:

• Blog Page: https://github.com/railsstudent/ironman2024-analog-blog/blob/main/src/app/pages/blog/index.page.ts
• Home Page: https://github.com/railsstudent/ironman2024-analog-blog/blob/main/src/app/pages/home.page.ts